<script setup lang="ts">
import { onMounted, ref } from "vue";
const { locale, setLocale, tm } = useI18n();
const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

const { $axios } = useNuxtApp();

const notification = ref<any>({ visible: false, text: "" });

const swiperData = ref<any>({ imgs: [], name: "", desc: "" });

// 首页数据获取
const fetchSwiperData = async () => {
  try {
    // GET请求
    const { isSuccess, data } = await $axios.get<any>(
      "/getSwiperByType?type=6"
    );

    if (isSuccess) {
      swiperData.value = data;
      // SEO 会根据中英文切换做不同的SEO
      useSeoMeta({
        keywords: swiperData.value.seoKeywords || tm("shop.seo.keywords"),
        title: swiperData.value.seoTitle || seo_title,
        ogTitle: swiperData.value.seoTitle || seo_ogTitle,
        description: swiperData.value.seoDesc || seo_description,
        ogDescription: swiperData.value.seoDesc || seo_ogDescription,
        ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
      })
    }

    console.log("获取数据成功 => ", swiperData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

/**
 * 校验邮箱格式是否合法
 * @param {string} email - 需要校验的邮箱地址
 * @returns {boolean} - 邮箱格式是否合法
 */
function validateEmail(email: string) {
  // 邮箱正则表达式
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

  // 测试邮箱格式
  return emailRegex.test(email);
}

// 提交联系我们表单
const formData = ref<any>({ name: "", email: "", message: "" });
const isLoading = ref<boolean>(false);
const createContact = async () => {
  if (
    !formData.value.name ||
    !formData.value.email ||
    !formData.value.message
  ) {
    notification.value.visible = true;
    notification.value.text = "Please fill in complete information";

    return;
  }
  if (!validateEmail(formData.value.email)) {
    notification.value.visible = true;
    notification.value.text = "Please enter a valid email address";

    return;
  }

  try {
    isLoading.value = true;
    const { isSuccess, data } = await $axios.post<any>(
      "/createContact",
      formData.value
    );
    isLoading.value = false;
    if (isSuccess) {
      notification.value.visible = true;
      notification.value.text = "Contact us form submitted successfully";

      formData.value = { name: "", email: "", message: "" };
    }
  } catch (error) {
    console.error("提交联系我们表单失败", error);
  }
};

onMounted(() => {
  // console.log("videos页面接受路由参数query", routeData)
  fetchSwiperData();
});
</script>

<template>
  <v-app>
    <v-snackbar v-model="notification.visible">
      {{ notification.text }}

      <template v-slot:actions>
        <v-btn
          color="pink"
          variant="text"
          @click="notification.visible = false"
        >
          Close
        </v-btn>
      </template>
    </v-snackbar>
    <!--     原<v-sheet color="#F5F4F2">-->
    <v-sheet>
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
          :HeadImage="swiperData.imgs[0] ? swiperData.imgs[0].url : ''"
          :HeadLabel="swiperData.name"
          :SubLabel="swiperData.desc"
        />
      </v-sheet>
      <div class="d-flex justify-center py-16">
        <v-sheet color="transparent" class="w-[90%]">
          <v-row>
            <!--     左边内容-->
            <v-col md="6" cols="12" class="">
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1 class="py-4 text-[20px] font-weight-black 2xl:text-[30px]">
                  Email:
                </h1>
                <!--               原<p  class="py-4 text-[20px] font-weight-black 2xl:text-[30px]" >-->
                <p class="py-2 text-[#888]">sales@lighttravelgo.com</p>
                <p class="py-2 text-[#888]">support@lighttravelgo.com</p>
              </v-sheet>
              <!-- 新增的wahtsapp-->
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1 class="py-4 text-[20px] font-weight-black 2xl:text-[30px]">
                  WhatsApp:
                </h1>
                <p class="py-2 text-[#888]">（+86） 135 5943 2586</p>
              </v-sheet>
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1 class="py-4 text-[20px] font-weight-black 2xl:text-[30px]">
                  Phone:
                </h1>
                <p class="py-2 text-[#888]">(+86) 180 2075 2032</p>
              </v-sheet>
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1 class="py-4 text-[20px] font-weight-black 2xl:text-[30px]">
                  Customer Support Hours:
                </h1>
                <div class="py-2 text-[#888]">
                  <p>Mon-Fri: 8am-10pm Beijing Time</p>
                  <p>Sat-Sun: 8am-8pm Beijing Time</p>
                </div>
              </v-sheet>

              <!-- 新增的Address-->
              <v-sheet
                color="transparent"
                class="d-flex flex-column text-center"
              >
                <h1 class="py-4 text-[20px] font-weight-black 2xl:text-[30px]">
                  Address:
                </h1>
                <p class="py-2 text-[#888]">
                  No. 1-3, Dongrenxi 2nd Road, Jimei District, <br />Xiamen
                  City, 409 Fujian 361026, China
                </p>
              </v-sheet>
            </v-col>

            <!--     右边内容-->
            <v-col md="6" cols="12" class="">
              <v-sheet color="transparent">
                <!--                下方DIV，是在提交是报错的提示内容，在提交区域的上方-->
                <!--                <div-->
                <!--                  class="text-[#ff0000] font-weight-thin text-xs 2xl:text-xl"-->
                <!--                >-->
                <!--                  Oops, looks like something something went wrong. Please-->
                <!--                  correct the highlighted field(s) below:-->
                <!--                </div>-->
              </v-sheet>
              <v-sheet color="transparent" class="py-5">
                <!--                <h1 class="font-weight-thin text-[#413e3]">Name</h1>-->
                <h1 class="text-[#555]">Name</h1>
                <v-sheet color="transparent" class="py-4">
                  <v-card
                    class="border-1px"
                    color="transparent"
                    elevation="0"
                    max-width="640"
                    flat
                  >
                    <v-card-text class="pa-0">
                      <!-- variant="solo" -->
                      <v-text-field
                        density="compact"
                        label="Your name"
                        hide-details
                        single-line
                        v-model="formData.name"
                      ></v-text-field>
                    </v-card-text>
                  </v-card>
                </v-sheet>
              </v-sheet>
              <v-sheet color="transparent" class="py-5">
                <h1 class="text-[#555]">Email</h1>
                <v-sheet color="transparent" class="py-4">
                  <v-card
                    class="border-1px"
                    color="transparent"
                    elevation="0"
                    max-width="640"
                    flat
                  >
                    <v-card-text class="pa-0">
                      <v-text-field
                        density="compact"
                        label="your@email.com"
                        hide-details
                        single-line
                        v-model="formData.email"
                      ></v-text-field>
                    </v-card-text>
                  </v-card>
                </v-sheet>
              </v-sheet>

              <v-sheet color="transparent" class="py-5">
                <h1 class="text-[#555]">Message</h1>
                <v-sheet color="transparent" class="pt-4">
                  <v-card
                    class="pa-0 border-1px"
                    color="transparent"
                    elevation="0"
                    max-width="640"
                    flat
                  >
                    <v-textarea
                      label="Enter some information you'd like to learn about or provide feedback on"
                      variant="solo"
                      hide-details
                      single-line
                      v-model="formData.message"
                    >
                    </v-textarea>
                  </v-card>
                </v-sheet>
              </v-sheet>
              <!--   按钮-->
              <v-sheet color="transparent" class="py-4">
                <!--原color="#786554"-->
                <v-btn
                  height="50"
                  variant="flat"
                  rounded="0"
                  color="#001529"
                  class="text-none font-weight-bold"
                  :disabled="isLoading"
                  @click="createContact"
                >
                  Submit
                </v-btn>
              </v-sheet>
            </v-col>
          </v-row>
        </v-sheet>
      </div>
    </v-sheet>
  </v-app>
</template>

<style scoped>
.border-1px {
  border: solid 1px #ddd;
}
</style>